<script lang="ts" setup>
import { ref, onMounted, nextTick, type ComponentInternalInstance } from "vue";
import util from "@/utils/util";
import ListVsiews from "@/components/common/ListView.vue";
import { AssetMetadata } from "@/types/AssetMetadata";
import { confirms, messages } from "@/utils/currency";
// import { assetDeleteDownload,assetDeleteUpload  } from "@/api/downloader";
import { getCurrentInstance } from "vue";

import { useStore } from "@/stores";
import { t as $t } from "@/plugins/dev";
import { indexedCache } from "@/plugins/account";

const instance = getCurrentInstance() as ComponentInternalInstance
const that = instance?.ctx
const store = useStore();


const activeName = ref('uploadRecords');

interface FileDownloadRecord {
  id: string;
  fileName: string;
  fileSize: number|string;
  downLoadTime: string;
}


interface FileUploadRecord {
  id: string;
  fileName: string;
  fileSize: number|string;
  upLoadTime: string;
}


const fileDownloadRecords = ref<FileDownloadRecord[]>([]);
const fileUploadRecords = ref<FileUploadRecord[]>([]);
const multipleSelectionDownload = ref<FileDownloadRecord[]>([]);
const multipleSelectionUpload = ref<FileUploadRecord[]>([]);
let downloadCount = ref<Number>(1);
const isMobile = ref(store.isMobile);
const getUploadRecords = async() =>{
  fileUploadRecords.value = [] as FileUploadRecord[];
const tableData: any[]=[];
  await indexedCache.cursor('uploader',res=>{
    tableData.push(res?.asset)
  });
  fileUploadRecords.value=tableData;
  console.log(tableData[0])
}

const getDownloadRecords = async() =>{
  fileDownloadRecords.value = [] as FileDownloadRecord[];
  const tableData: any[]=[];
  await indexedCache.cursor('downloader',res=>{
    tableData.push(res?.asset)
  });
  fileDownloadRecords.value=tableData;
}




onMounted(()=>{
  getDownloadRecords();
  getUploadRecords();
})
const generateActionsDownload = () => [
  {
    // label: "删除",
    // icon: "icon-shanchu",
    // callback: () => handleDeleteDownload(row)
  },
];


const updateSelectionDownload = (val: FileDownloadRecord[]) => {
  // 触发父组件的事件，更新选中项
  multipleSelectionDownload.value = val;

};


const multipleDeleteDownload = async () => {
  if(multipleSelectionDownload.value){
    multipleSelectionDownload.value.forEach(async () => {
      nextTick(async  ()=> {
        handleSuccessDownload("del", "删除");
      });
    });
  }
}

const handleSuccessDownload = (data: string, msg = "新增") => {




  if (data) {
    messages(msg + "成功", "success");
    nextTick(()=>{
      if(downloadCount.value){


        getDownloadRecords();
        if (downloadCount.value !== null) {
          downloadCount.value = downloadCount.value + 1;
        }

      }
    })
  }
};



const generateActionsUpload = () => [
//   {
//     label: "删除",
//     icon: "icon-shanchu",
//     callback: () => handleDeleteUpload(row)
//   },
];


const updateSelectionUpload = (val: FileUploadRecord[]) => {
  // 触发父组件的事件，更新选中项
  multipleSelectionUpload.value = val;

};





</script>

<template>
  <div style="position: relative">
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
    >
    <el-tab-pane label="上传任务" name="uploadRecords">
        <div class="flexCenter" v-if="multipleSelectionUpload.length">


          <!-- <el-button type="primary">
            <span class="iconfont icon-shanchu"></span>
            <span class="pljh" v-if="!isMobile" @click="multipleDeleteUpload">{{$t('assets.delete')}}</span>
          </el-button> -->
        </div>
          <ListVsiews :data="fileUploadRecords" :generateActions="generateActionsUpload" @update:selection="updateSelectionUpload" style="width: 100%">
            <template #dynamic-columns >
          <el-table-column prop="name" label="文件名" width="180" />
          <el-table-column prop="size" label="文件大小" width="180" >
            <template #default="scope">
              <span>{{ util.formatFileSize(Number(scope.row.size)) || '-' }}</span>
            </template>
          </el-table-column>
            <el-table-column prop="updatedAt" label="更新时间" />
            </template>
          </ListVsiews>




      </el-tab-pane>
      <el-tab-pane label="下载任务" name="downloadRecords">
        <div class="flexCenter" v-if="multipleSelectionDownload.length">


          <el-button type="primary">
            <span class="iconfont icon-shanchu"></span>
            <span class="pljh" v-if="!isMobile" @click="multipleDeleteDownload">{{$t('assets.delete')}}</span>
          </el-button>
        </div>
          <ListVsiews :data="fileDownloadRecords" :generateActions="generateActionsDownload" @update:selection="updateSelectionDownload" style="width: 100%">
            <template #dynamic-columns  >
          <el-table-column prop="name" label="文件名" width="180" />
          <el-table-column prop="sieze" label="文件大小" width="180" />
          <el-table-column prop="downloadAt" label="下载时间" />
            </template>
          </ListVsiews>



      </el-tab-pane>
     

    </el-tabs>
  </div>

</template>

<style scoped lang="scss">

</style>